(function() {

this.codium = this.codium || {};
this.codium.control = this.codium.control || {};

this.codium.control.MenuButton = pasta.webgui.Control.extend(
{
	init : function() 
	{
		this._super();
		
		this.caption = "";
		this.canvas.style.overflow = "hidden";
		
		this.leftBg = document.createElement("div");
		this.leftBg.id = this.cid + "_leftBg";
		this.leftBg.style.position = "absolute";
		this.leftBg.style.left = "0px";
		this.leftBg.style.top = "0px";
		this.leftBg.style.width = "6px";
		this.leftBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuLeft.png)";
		this.leftBg.style.backgroundPosition = "left top";
		this.canvas.appendChild(this.leftBg);
		
		this.rightBg = document.createElement("div");
		this.rightBg.id = this.cid + "_rightBg";
		this.rightBg.style.position = "absolute";
		this.rightBg.style.left = (this.width - 6) + "px";
		this.rightBg.style.top = "0px";
		this.rightBg.style.width = "6px";
		this.rightBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuRight.png)";
		this.rightBg.style.backgroundPosition = "left top";
		this.canvas.appendChild(this.rightBg);
		
		this.middleBg = document.createElement("div");
		this.middleBg.id = this.cid + "_middleBg";
		this.middleBg.style.position = "absolute";
		this.middleBg.style.left = "6px";
		this.middleBg.style.top = "0px";
		this.middleBg.style.width = (this.width - 12) + "px";
		this.middleBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuMiddle.png)";
		this.middleBg.style.backgroundPosition = "left top";
		this.canvas.appendChild(this.middleBg);
		
		this.title = document.createElement("div");
		this.title.style.position = "absolute";
		this.title.style.left = "52px";
		this.title.style.top = "7px";
		this.title.style.width = "100%";
		this.title.style.height = "100%";
		this.title.style.cursor = "pointer";
		this.canvas.appendChild(this.title);
		
		this.desc = document.createElement("div");
		this.desc.style.position = "absolute";
		this.desc.style.left = this.title.style.left;
		this.desc.style.top = "24px";
		this.desc.style.width = "100%";
		this.desc.style.height = "100%";
		this.desc.style.cursor = "pointer";
		this.canvas.appendChild(this.desc);
		
		this.iconCanvas = document.createElement("div");
		this.iconCanvas.id = this.cid + "_icon";
		this.iconCanvas.style.position = "absolute";
		this.iconCanvas.style.left = "10px";
		this.iconCanvas.style.top = "8px";
		this.iconCanvas.style.width = "32px";
		this.iconCanvas.style.height = "32px";
		this.iconCanvas.style.backgroundPosition = "center";
		this.iconCanvas.style.backgroundRepeat = "no-repeat";
		this.canvas.appendChild(this.iconCanvas);
		
		this.font = new pasta.util.Font();
		this.font.setBold(true);
		this.font.setSize(14);
		
		this.fontDesc = new pasta.util.Font();
		this.fontDesc.setSize(12);
		
		this.setButtonMode(true);
		this.setHeight(52);
	},
	
	//------------------ Event Handler -----------------
	
	doClick : function()
	{
		this.leftBg.style.backgroundPosition = "left bottom";
		this.rightBg.style.backgroundPosition = "left bottom";
		this.middleBg.style.backgroundPosition = "left bottom";
		
		this._super();
		
		this.leftBg.style.backgroundPosition = "left top";
		this.rightBg.style.backgroundPosition = "left top";
		this.middleBg.style.backgroundPosition = "left top";
	},
	
	doMouseOver : function()
	{
		this.leftBg.style.backgroundPosition = "left center";
		this.rightBg.style.backgroundPosition = "left center";
		this.middleBg.style.backgroundPosition = "left center";
		
		this._super();
	},
	
	doMouseOut : function()
	{
		this.leftBg.style.backgroundPosition = "left top";
		this.rightBg.style.backgroundPosition = "left top";
		this.middleBg.style.backgroundPosition = "left top";
		
		this._super();
	},
	
	doMouseDown : function(x, y)
	{
		this.leftBg.style.backgroundPosition = "left bottom";
		this.rightBg.style.backgroundPosition = "left bottom";
		this.middleBg.style.backgroundPosition = "left bottom";
		
		this._super(x, y);
	},
	
	doMouseUp : function(x, y)
	{
		this.leftBg.style.backgroundPosition = "left top";
		this.rightBg.style.backgroundPosition = "left top";
		this.middleBg.style.backgroundPosition = "left top";
		
		this._super(x, y);
	},
	
	//------------------ Setter & Getter -----------------
	
	setActive : function(data)
	{
		this.active = data;
		
		if (this.active)
		{
			this.leftBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuLeftActive.png)";
			this.rightBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuRightActive.png)";
			this.middleBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuMiddleActive.png)";
		}
		else
		{
			this.leftBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuLeft.png)";
			this.rightBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuRight.png)";
			this.middleBg.style.backgroundImage = "url(" + this.libDir + "/img/button/menuMiddle.png)";
		}
	},
	
	getCaption : function()
	{
		return this.caption;
	},
	
	setCaption : function(data)
	{
		this.caption = data;
		this.title.innerHTML = this.caption;
		this.font.applyFont(this.title);
	},
	
	getDescription : function()
	{
		return this.description;
	},
	
	setDescription : function(data)
	{
		this.description = data;
		this.desc.innerHTML = this.description;
		this.fontDesc.applyFont(this.desc);
	},
	
	setIcon : function(data)
	{
		this.iconCanvas.style.backgroundImage = "url(" + data + ")";
	},
	
	setHeight : function(data)
	{
		this._super(data);
		
		this.leftBg.style.height = data + "px";
		this.rightBg.style.height = data + "px";
		this.middleBg.style.height = data + "px";
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		this.rightBg.style.left = (this.width - 6) + "px";
		this.middleBg.style.width = (this.width - 12) + "px";
	}
});

})();